<template>
    <div class="lesson-box">
        <div class="search-row">
            <div class="search-item">
                <el-input v-model="searchParams.question" placeholder="请输入资源名称"></el-input>
            </div>
            <div class="search-actions">
                <el-button type="primary">
                    <el-icon><Search /></el-icon>查询
                </el-button>
                <el-button>
                    <el-icon><RefreshLeft /></el-icon>重置
                </el-button>
            </div>
        </div>
        <div class="question-box">
            <div class="action-buttons">
                <div class="left-buttons">
                    <el-button type="primary" class="btns" @click="uploadBook">
                        <img src="@/assets/add-point.png" alt="">
                        <span>上传书籍</span>
                    </el-button>
                </div>
            </div>
            <div class="table-container">
                <el-table ref="multipleTableRef" :data="booklist" style="width: 100%" @selection-change="handleSelectionChange" >
                    <el-table-column type="selection" />
                    <el-table-column label="教材名称">
                        <template #default="scope">
                            <el-tooltip class="box-item" effect="dark" :content="scope.row.title" placement="top-start" > <div class="text">{{ scope.row.title }}</div> </el-tooltip>
                        </template>
                    </el-table-column>
                    <el-table-column prop="type" label="教材/图书类型" />
                    <el-table-column prop="isbn" label="ISBN码" />
                    <el-table-column prop="knowledge" label="知识点" />
                    <el-table-column prop="relationship" label="关系" />
                    <el-table-column prop="status" label="状态" />
                    <el-table-column prop="use_time" label="生成时长" />
                    <el-table-column prop="create_time" label="创建时间" />
                    <el-table-column property="name" label="操作" align="center" width="150">
                        <template #default="scope">
                            <div class="material-operations">
                                <el-link type="primary"  @click="graphView(scope.row)" :underline="false">书籍图谱</el-link>
                                <el-link type="primary"  @click="preview(scope.row)" :underline="false">更多</el-link>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pages">
                    <el-pagination small background layout="prev, pager, next" :total="50" class="mt-4" />
                </div>
            </div>
        </div>
    </div>
    <el-dialog v-model="uploadDialogVisible" title="Tips" width="40%">
        <template #header>
            <div class="my-header">
                <span>上传教材</span>
            </div>
        </template>
        <div class="quote-box">
            <div class="notification-container">
                <div class="notification-icon">
                    <el-icon color="#FA8C2A"><WarningFilled /></el-icon>
                    <span>本地选取电子版教材/图书进行上传，并自动生成教材/图书知识图谱。</span>
                    <span>支持格式：pdf,docx,txt,doc</span>
                </div>
            </div>
            <div class="quote-item">
                <el-input v-model="isbn" placeholder="请输入ISBN码" />
                <el-input v-model="bookname" placeholder="请输入教材名称" />
                <div class="quote-uploads">
                    <el-input v-model="fileName" disabled />
                    <el-upload ref="uploadRef" class="upload-demo" action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" :auto-upload="false" :on-change="handleFileChange" :show-file-list="false" :multiple="false">
                        <template #trigger>
                            <el-button type="primary">选择文件</el-button>
                        </template>
                    </el-upload>
                </div>
            </div>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="uploadBook()">取消</el-button>
                <el-button type="primary" @click="uploadBook()">上传并生成图谱</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup>
    import { ref,defineEmits  } from 'vue'
    import { Search,RefreshLeft } from '@element-plus/icons-vue'
    const searchParams = ref({
        question: '',
    });
    const booklist = ref([
        {
            title: '标准日语（初级下册）',
            type: '公开标准教材',
            isbn: '9787107185069',
            permission: '完全公开',
            knowledge: '369',
            relationship: '269',
            use_time:'60s',
            status: '生成完成',
            create_time: "2025-9-14 17:07:56"
        },
        {
            title: '标准日语（初级上册）',
            type: '公开标准教材',
            isbn: '7107108654',
            permission: '完全公开',
            knowledge: '263',
            relationship: '184',
            use_time:'60s',
            status: '生成完成',
            create_time: "2025-9-14 17:07:56"
        },
        {
            title: '信号与系统',
            type: '公开标准教材',
            isbn: '9787111759775',
            permission: '完全公开',
            knowledge: '95',
            relationship: '78',
            use_time:'60s',
            status: '生成中',
            create_time: "2025-9-14 17:07:56"
        },
        {
            title: 'Java程序语言设计课程标准',
            type: '公开标准教材',
            isbn: '7843954512',
            permission: '完全公开',
            knowledge: '168',
            relationship: '175',
            use_time:'60s',
            status: '生成中',
            create_time: "2025-9-14 17:07:56"
        },
        {
            title: '模拟电路与数字电路',
            type: '公开标准教材',
            isbn: '5675869783233',
            permission: '完全公开',
            knowledge: '1335',
            relationship: '1350',
            use_time:'60s',
            status: '生成完成',
            create_time: "2025-9-14 17:07:56"
        },
        {
            title: '物联网综合设计',
            type: '公开标准教材',
            isbn: '5675869783233',
            permission: '完全公开',
            knowledge: '1335',
            relationship: '1350',
            use_time:'60s',
            status: '生成完成',
            create_time: "2025-9-14 17:07:56"
        },
        {
            title: '传感器原理与应用',
            type: '公开标准教材',
            isbn: '1234567893',
            permission: '完全公开',
            knowledge: '94',
            relationship: '1350',
            use_time:'60s',
            status: '生成完成',
            create_time: "2025-9-14 17:07:56"
        },
        {
            title: '国家安全教育大学生读本',
            type: '公开标准教材',
            isbn: '1234567893',
            permission: '完全公开',
            knowledge: '94',
            relationship: '1350',
            use_time:'60s',
            status: '生成完成',
            create_time: "2025-9-14 17:07:56"
        },
    ]);
    const videoShow = ref(false);
    const uploadDialogVisible = ref(false);
    const preview = () => {
        videoShow.value = !videoShow.value;
    }
    const fileName = ref('')
    const uploadBook = () => {
        fileName.value = ""
        uploadDialogVisible.value  =  !uploadDialogVisible.value;
    };
    const handleFileChange = (file) => {
        fileName.value = file.name;
    }
    const emit = defineEmits(['update-show-visable'])
    const graphView = () => {
        emit('update-show-visable', 1);
    }
</script>

<style scoped>
    :deep(.el-popper.is-light>.el-popper__arrow:before){border: none!important;}
    :deep(.el-card__header){padding: 0;}
    :deep(.el-row){ width: 100%;display: flex;flex-direction: row;justify-content: space-between; }
    :deep(.el-card__body){padding: 0;}
    :deep(.el-input){height: 35px;}
    :deep(.inputs .el-input){width: 100%;}
    :deep(.el-button--primary){background: #1465E1;}
    :deep(.el-switch.is-checked .el-switch__core){background: #1465E1;border: 1px solid #1465E1;}
    :deep(.upload-demo){ display: flex; flex-direction: column; justify-content: start; align-items: start; }
    :deep(.manage):hover{border: 1px solid #1465E1;color: #1465E1;}
    .lesson-box{ width: 100%; }
    .search-row { background: #fff;border-radius: 8px;display: flex;flex-direction: row;align-items: center;justify-content: space-between;height: 80px; }
    .search-item { min-width: 200px;margin-left: 20px; }
    :deep(.search-item .el-input){width: 100%;}
    .question-box{ height: 85vh;padding-right: 20px;margin-top: 20px;background: #fff;height: calc(85vh - 80px);border-radius: 8px; }
    .item-box{height: calc(85vh - 45px);}
    .search-actions{margin-right: 20px;}
    .action-buttons { display: flex; justify-content: space-between; padding: 20px 20px 20px 20px; border-bottom: 1px solid #eaeef2; }
    .left-buttons { display: flex; gap: 12px; height: 35px; }
    .left-buttons img{width: 18px;}
    .left-buttons .btns{background: #1465E1;height: 35px;}
    .left-buttons .danger{color: #D4424A;height: 35px;border: 1px solid #D4424A;}
    .left-buttons span{margin-left: 5px;font-family: 微软雅黑, Microsoft YaHei, SimSun;font-size: 12px;}
    .right-buttons { display: flex; gap: 12px; }
    .material-operations { display: flex; justify-content: end; gap: 12px;font-family: 微软雅黑, Microsoft YaHei, SimSun;font-size: 14px; }
    .pages{display: flex;flex-direction: row;justify-content: end;padding-top: 30px;position: absolute;bottom: 20px;right: 20px;}
    .add-form{ width: calc(100% - 30px);margin: 10px auto;display: flex;flex-direction: row; gap: 20px; }
    .form-item{flex: 1;}
    .add-form .items{display: flex;flex-direction: row;gap: 10px;}
    .add-form .items .reds{ color: red; }
    .add-form .items .text{ font-family: 微软雅黑, Microsoft YaHei, SimSun;font-size: 14px;flex: 0 0 80px;text-align: left;text-align: right; }
    .add-form .inputs{ margin-top: 10px; }
    .box-item{display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; text-overflow: ellipsis;font-family: 微软雅黑, Microsoft YaHei, SimSun;font-size: 14px;}
    .headers{display: flex;flex-direction: row;justify-content: space-between;}
    .headers .right{display: flex;flex-direction: row;justify-content: center;gap: 20px;}
    .headers .right .download{ width: 120px;border: 1px solid #1465E1;border-radius: 10px;height: 35px;display: flex;flex-direction: row;align-items: center;justify-content: center;cursor: pointer; }
    .headers .right .download img{ width: 30px;height: 30px; }
    .headers .right .download span{ margin-left: 5px;font-family: 微软雅黑, Microsoft YaHei, SimSun;color: #1465E1;font-size: 14px; }
    .headers .right .over{ width: 120px;background: #1465E1;border-radius: 10px;height: 35px;display: flex;flex-direction: row;align-items: center;justify-content: center;cursor: pointer; }
    .headers .right .over img{ width: 30px;height: 30px; }
    .headers .right .over span{ margin-left: 5px;font-family: 微软雅黑, Microsoft YaHei, SimSun;color: #fff;font-size: 14px; }
    .my-header{text-align: left;}
    .text{ width: 100%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-size: 14px;font-family: 微软雅黑, Microsoft YaHei, SimSun; }
    .quote-box{ width: 100%; }
    .quote-item{ display: flex;flex-direction: column;width: 100%;gap: 20px;margin-top: 20px; }
    .notification-icon{ display: flex;flex-direction: row;justify-content: center;align-items: center;background: #FFF9ED; width: calc( 100% - 20px );padding: 10px;border-radius: 10px; }
    .notification-icon span{ margin-left: 5px;color: #FA8C2A; }
    .selects{margin-top: 20px;}
    .quote-uploads{display: flex;flex-direction: row;width: 100%;gap: 20px;justify-content: space-between;align-items: center;height: 35px; }
</style>